<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品评论</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.shopping{clear:both;overflow:hidden;height:auto;background-color: #F3F3F3;}
		
		.goods-container {width: 100%; height: 116px; background-color: #FFFFFF; position: relative;}
		.goods-container .goods-image-div {display: inline-block; margin-top: 27px; margin-left: 13px;}
		.goods-container .goods-image-div .goods-image {width: 63px; height: 63px;}
		.goods-container .goods-info {position: absolute; left: 90px; top: 27px;}
		.goods-container .goods-info .goods-name {font-size: 17px; color: #838383; font-family: "PingFang-SC-Regular";}
		.goods-container .goods-info .goods-specifications {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.goods-container .goods-info .goods-price {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.goods-container .goods-info .goods-price span{color: #EC6B44;}
		.goods-container .review-info {display: inline-block; float: right; margin-top: 27px; margin-right: 30px;}
		.goods-container .review-info .review-ratio {font-size: 15px; color: #838383; font-family: "PingFang-SC-Regular";}
		.goods-container .review-info .review-ratio span{color: #EC6941;}
		.goods-container .review-info .review-num {text-align: right; font-size: 10px; color: #838383; font-family: "PingFang-SC-Regular";}
		
		.shop-group-item{margin-bottom:5px;}
		.shop-group-item ul li{border-bottom:1px solid #C5C5C5;list-style: none; position: relative;}
		.shop-group-item ul li:last-child{border-bottom:none;}
		
		.shop-info{padding:13px 15px;position:relative; display: table-cell;vertical-align: middle;}
		.shop-info .shop-info-img{width: 100%;}
		.shop-info .shop-info-img img{width:30px;height:30px;border-radius: 15px;}
		.shop-info .shop-info-img span{vertical-align: super; font-size: 17px; color: #838383; margin-left: 8px; font-family: "PingFang-SC-Regular";}
		.star-div{position: absolute; right: 30px; top: 22px;}
		.star-div img{width: 16px; height: 16px;}
		.shop-info .shop-info-text{ margin-right: 5px;}
		.shop-info .shop-info-text div{font-size:15px; color: #454545; font-family: "PingFang-SC-Regular";}
		.shop-info .shop-info-text .shop-brief{line-height:18px;font-size:12px;color:#454545;font-family: "PingFang-SC-Regular";}
		.shop-info .shop-info-text .shop-brief span{display:inline-block;}
		.shop-info .shop-info-text .shop-price{margin-top: 5px; height:24px;line-height:24px;position:relative;}
		.shop-info .shop-info-text .shop-price .shop-pices {color:#8B8B8B;font-size:12px;font-family: "PingFang-SC-Regular";}
		.empty_list {
			display: none;
		    font-size: 15px;
		    line-height: 40px;
		    color: #777;
			margin-top: 20px;
			text-align: center;
		}
	</style>
	<body>
		<div class="shopping">
			<div class="goods-container">
				<div class="goods-image-div"><img class="goods-image" /></div>
				<div class="goods-info">
					<div class="goods-name"></div>
					<div class="goods-specifications"></div>
					<div class="goods-price">商品价格：<span></span></div>
				</div>
				<div class="review-info">
					<div class="review-ratio">好评率：<span></span></div>
					<div class="review-num"></div>
				</div>
			</div>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="shop-group-item">
					<ul>
						<!--<li>
							<div class="shop-info">
								<div class="shop-info-img">
									<img src="../img/index/tuijian_bg.png" /><span>詹姆斯</span>
								</div>
								<div class="shop-info-text">
									<div class="shop-brief"><span>这个东西很不错，相当的喜欢这个东西很不错，相当的喜欢这个东西很不错，相当的喜欢这个东西很不错，相当的喜欢这个东西很不错，相当的喜欢这个东西很不错，相当的喜欢</span></div>
									<div class="shop-price">
										<div class="shop-pices"><span class="price">2018-12-12 12:12</span></div>
									</div>
								</div>
							</div>
							<div class="star-div">
								<img src="../img/index/chihuo_icon.png" />
								<img src="../img/index/chihuo_icon.png" />
								<img src="../img/index/chihuo_icon.png" />
								<img src="../img/index/chihuo_icon.png" />
							</div>
						</li>-->
					</ul>
				</div>
			</div>
			<div class="empty_list">暂无该技术员的评论！</div>
		</div>
		<div class="common-back-div">
			<img class="common-back-img" src="../img/common/public_back.png" />
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var userID = base.getParameter("userID");
		var goodsID = base.getParameter("goodsID");
		var FIRST_PAGE_NO = 1;
		var saved = base.getSavedData();
		var query = saved.query || {
			pageNo: FIRST_PAGE_NO,
			dir: 'none'
		};
		getEvaluateGoodsList(query.pageNo);
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		function pulldownRefresh() {
			query.pageNo = FIRST_PAGE_NO;
			query.dir = 'down';
			getEvaluateGoodsList(query.pageNo);
		}

		function pullupRefresh() {
			query.pageNo++;
			query.dir = 'up';
			getEvaluateGoodsList(query.pageNo);
		}
		function getEvaluateGoodsList(page) {
			base.setWait('正在获取数据...');
			query.pageNo = page;
			var url = base.url.getEvaluateGoodsList;
			var data = {
				userID: userID,
				goodsID: goodsID,
				pageNo: page,
			};
			base.postData(url,data,getEvaluateGoodsListSuccess);
		}
		function getEvaluateGoodsListSuccess(data) {
			base.clearWait();
			if(data.success === true && data.context) {
				$(".goods-name").text(data.context.goodsInfo.goodsName);
				$(".goods-specifications").text(data.context.goodsInfo.describe);
				$(".goods-price span").text("¥"+data.context.goodsInfo.price/100);
				$(".review-ratio span").text(data.context.goodsInfo.praiseRate+"%");
				$(".review-num").text(data.context.goodsInfo.commentNum+"人评论");
				$(".goods-image").attr("src", data.context.goodsInfo.goodsImg);
				var list = data.context.evaluateList||[];
				if(!list || !list.length) {
					if(query.pageNo == FIRST_PAGE_NO) {
						$('#pullrefresh').hide();
						$('.empty_list').show();
					}
					if (query.dir === 'down') {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					} else if (query.dir === 'up') {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					}
				} else {
					if(query.dir === 'up') {
						showList(list, saved.list.length);
						saved.list = saved.list.concat(list);
					} else {
						showList(list);
						saved.list = list;
					}
				}
				if(query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().refresh(true);
				} else if(query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}
			} else {
				if(query.pageNo == FIRST_PAGE_NO) {
					$('#pullrefresh').hide();
					$('.empty_list').show();
				}
				if (query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				} else if (query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
			}
			query.dir = 'none';
		}
		function showList(list) {
			var html = '';
			for (var i in list) {
				html += getListItem(list[i], i);
			}
			$(".shop-group-item ul").html(html);
		}
		function getListItem(item,index) {
			var html = '';
			html += '<li data-index="'+index+'">'
			html += '	<div class="shop-info">'
			html += '		<div class="shop-info-img"><img src="'+item.headImg+'" /><span>'+item.evaluator+'</span></div>'
			html += '		<div class="shop-info-text">'
			html += '			<div class="shop-brief"><span>'+item.content+'</span></div>'
			html += '			<div class="shop-price">'
			html += '				<div class="shop-pices"><span class="price">'+item.createTime+'</span></div>'
			html += '			</div>'
			html += '		</div>'
			html += '	</div>'
			html += '	<div class="star-div">'
			for (var i=0;i < 5; i++) {
				if (i<item.stars) {
					html += '			<img class="star-icon" src="../img/person/star.png" />'
				} else {
					html += '			<img class="star-icon" src="../img/person/star_h.png" />'
				}
			}
			html += '	</div>'
			html += '</li>'
			return html;
		}
		$(".common-back-div").on('tap','.common-back-img',function(){
			mui.back();
		});
	  </script>
</html>
